<script lang="js" setup>
import { ref, reactive } from "vue"
import { Reading,Tickets,EditPen } from '@element-plus/icons-vue'
import { RouterView } from "vue-router";

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="150px">
                <el-menu router default-active="/writercenter/mybooks" class="el-menu-vertical-demo">
                    <el-menu-item index="/writercenter/mybooks">
                        <el-icon><Reading /></el-icon>
                        <span>我的书籍</span>
                    </el-menu-item>
                    <el-menu-item index="/writercenter/reviewlist">
                        <el-icon><Tickets /></el-icon>
                        <span>审核列表</span>
                    </el-menu-item>
                    <el-menu-item index="/writercenter/write">
                        <el-icon><EditPen /></el-icon>
                        <span>写作</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.el-menu {
    min-height: calc(100vh - 60px);
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>